<template>
    <div id="Person">
        <ul>
            <li>{{a}}</li>
            <li>{{age}}</li>
            <!--<li>{{// sex}} || {{$store.getters.getSex}} || {{getSexs}} || {{getSex}}</li>-->
            <li>{{sex}} || {{$store.getters.getSex(6)}} </li>
        </ul>
        {{test}}
        <input type="text" @input="setAge" v-bind:value="age">
    </div>
</template>

<script>
    import {mapState,mapGetters} from 'vuex'
    export default {
        name: "Person",

        //数组方式
        //computed:mapState(['name','age','sex']),
        //对象方式
        computed:{
            test(){
                return "Test"
            },
            // getSexs(id){
            //     return this.$store.getters.getSex(id)
            // },
            //...mapGetters(['getSex']),
            ...mapState({
                //a:(state)=>state.name,
                a:'name',
                sex:'sex',
                age(state){
                    return state.age
                }

            })
        },
        methods:{
            setAge(e){
                this.$store.commit('setAge',e.target.value)
            }
        }
        // computed:{
        //     name(){
        //         return this.$store.state.name
        //     },
        //     age:{
        //         get(){
        //             return this.$store.state.age
        //         },
        //         set(val){
        //           this.$store.commit('setAge',val)
        //         }
        //     },
        //     sex(){
        //         return this.$store.state.sex
        //     }
        // }
    }
</script>

<style scoped>

</style>